<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="studentUnion/_fragments :: head(~{::title})">
    <meta charset="utf-8">
    <title>学生会管理系统</title>
    <link rel="shortcut icon" href="../../static/images/favicon.ico" type="image/x-icon" />
    <link href="../../static/layui/css/layui.css" rel="stylesheet" type="text/css" />
    <link href="../../static/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../../static/css/style.css" rel="stylesheet"  type="text/css"/>
    <script src="../../static/layui/layui.js" type="text/javascript"></script>
    <script src="../../static/js/style.js" type="text/javascript"></script>
</head>
<style>
    #img img{
        width: 700px;
        height: 350px;
    }
</style>
<body>
<div class="layui-container layui-row m-top-max ">
    <div class="layui-card m">
        <div class="layui-card-header text-alian layui-font-20">
            <span th:text="${activity.activityName}">学生会招新</span>
        </div>
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-md2 text-c-white">-</div>
                <div class="layui-col-md8">
                    <img src="https://picsum.photos/700/300" th:src="@{${activity.imgPath}}" width="700px" height="300px">
                </div>
                <div class="layui-col-md2 text-c-white">-</div>
            </div>
            <div class="layui-fluid p-clean layui-text m-top-min w-lg" id="img" th:utext="${activity.activityContent}">
                卡片式面板面板通常用于非白色背景色的主体内
                卡片式面板面板通常用于非白色背景色的主体内
                卡片式面板面板通常用于非白色背景色的主体内
                卡片式面板面板通常用于非白色背景色的主体内.....
            </div>
            <div class="text-alian m-top-max">
                <button class="layui-btn baoMing" th:attr="date=${activity.cutOffTime}">报名</button>
            </div>
        </div>
    </div>
</div>
<form id="personalInfo" class="layui-form" th:action="@{/activity/signUp}" method="post"  style="display:none;">
    <div class="layui-form-item">
        <label class="layui-form-label">竞选目标</label>
        <div class="layui-input-block">
            <input type="radio" name="role" value="2" title="主席">
            <input type="radio" name="role" value="6" title="副主席">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="personalBtn">立即提交</button>
            <button type="button" class="layui-btn layui-btn-primary" onclick="quxiao()">取消</button>
        </div>
    </div>
</form>
<script th:src="@{/js/select_data.js}"></script>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<script>
    layui.use(['form','layer'],function (){
        var form = layui.form;
        var $ = layui.$;

        var url = window.location.href;
        var activityId =url.substring(url.lastIndexOf("/")+1)

        var curOffTime = new Date($('.baoMing').attr('date'))
        var myDate = new Date;
        if(curOffTime.getTime() < myDate.getTime()){
            $('.baoMing').hide()
        }
        var index;
        $('.baoMing').on('click',function (){
            index = layer.open({
                type:1,//5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                scrollbar: false,
                area: '400px',//宽高
                title:'换届报名',
                content:$('#personalInfo'),
                success:function (){
                    select()
                    form.render('select'); //这个很重要
                }
            })
        })
        form.on('select(info_personal)', function (data) {
            console.log(data)
            selectByName(data.value)
            form.render('select'); //这个很重要
        });
        /**提交form表单*/
        form.on('submit(personalBtn)', function (data) {
            var obj = data.field
            obj.activityId = activityId;
            ajax(data.form.action, obj, data.form.method).then(function (res) {
                layer.msg(res.msg, {time: 1000}, function () {
                    layer.close(index);
                    $('#personalInfo').attr("style","display:none");
                });
            })
            return false;
        });

    })
    /**关闭弹窗*/
    function quxiao(){
        layui.use('layer',function(){
            var $ = layui.$;
            var layer = layui.layer ;
            layer.closeAll();
            $('#personalInfo').attr("style","display:none");
        });
    }
</script>
</body>

</html>
